<template>
    <div class="ticket-cell">
        <div class="cell-info-left">
            <div class="img-container">
                <my-image class="my-img-meal" :imgUrl="goods.url"></my-image>
            </div>
        </div>
        <div class="cell-info-right">
            <p class="name">{{goods.names}}</p>
            <p class="dec">{{goods.dec}}</p>
            <p v-show="goods.state=='0'" class="valid-time">有效期:{{goods.starttm}}至{{goods.endtm}}</p>
            <p v-show="goods.state=='1'" class="valid-time">使用于:{{goods.usetm}}</p>
            <p v-show="goods.state=='2'" class="valid-time">过期时间:{{goods.endtm}}</p>
        </div>
        <div v-if="this.role.toString()=='1'" class="qcode-div">
            <i v-show="goods.state=='0'" class="iconfont icon-qcode"></i>
            <i v-show="goods.state=='1'" class="iconfont icon-yishiyong1"></i>
            <i v-show="goods.state=='2'" class="iconfont icon-yiguoqi1"></i>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import myImage from "../../lazyloadImg/lazyImage.vue";

export default {
  name: "ticket-cell",
  data() {
    return {};
  },
  props: {
    goods: {
      type: Object,
      default: function() {
        return {
          url: "https://www.jubenxiong.com/aml/img/nx_1515661463680.png",
          names: "380美容套餐",
          dec: "",
          starttm: "2018-01-20",
          endtm: "2018-02-20",
          price: 333,
          usetm: "",
          state: ""
        };
      }
    }
  },
  components: { myImage },
  activated() {},
  created() {},
  computed: {
    ...mapState(["role"])
  },
  methods: {}
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.ticket-cell {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.13rem 0;

    .qcode-div {
        margin-right: 0.12rem;

        .icon-qcode {
            font-size: 0.3rem;
            color: #303030;
        }

        .icon-yishiyong1 {
            color: #8a8a8a;
            font-size: 0.48rem;
        }

        .icon-yiguoqi1 {
            color: #8a8a8a;
            font-size: 0.48rem;
        }
    }

    .cell-info-left {
        flex: 0 0 0.68rem;

        .my-img-meal {
            margin-left: 0.08rem;
            width: 0.54rem;
            height: 0.54rem;
            background-color: #f1f1f1;
        }
    }

    .cell-info-right {
        flex: 1;

        .name {
            font-size: 0.13rem;
            font-weight: 700;
            color: #303030;
            letter-spacing: 0.01rem;
        }

        .dec {
            padding: 0.04rem 0 0.02rem 0;
            font-size: 0.12rem;
            color: #8a8a8a;
            line-height: 0.16rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .valid-time {
            font-size: 0.12rem;
            color: #8a8a8a;
        }
    }
}
</style>
